<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

const navigator = [
  {
    title: '库存出入库',
    href: '/pages/inventory/index',
    icon: 'icon-kucun-ruku',
    color: '#79C372',
  },
  // {
  //   title: '库存盘点',
  //   href: '/pages/inventory/check/list',
  //   icon: 'icon-kucunguanli1',
  //   color: '#DF8711',
  // },
  {
    title: '库存信息',
    href: '/pages/inventory/index',
    icon: 'icon-kucunguanli1',
    color: '#007FFF',
  },
]

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

function jumpPage(item) {
  // 判断是否为tabbar页面，tabbar页面需用switchTab跳转
  const tabbarPages = [
    '/pages/index/index',
    '/pages/inventory/index',
    // 如有其它tabbar页面，继续补充
  ]
  if (tabbarPages.includes(item.href)) {
    uni.switchTab({ url: item.href })
  }
  else {
    uni.navigateTo({ url: item.href })
  }
}
onLoad(() => {

})
</script>

<template>
  <view class="index_page">
    <view class="banner">
      <view style="flex:1.8">
        <view style="color: #FFFFFF; font-size: 40rpx;margin: 0 0 16rpx 30rpx;padding-left: 6rpx;">
          应急局仓储管理系统
        </view>
        <view class="banner_text">
          智慧仓储，物资储备无忧
        </view>
      </view>
      <view style="flex:1.2">
        <image
          src="/static/images/index_banner.png"
          style="width:100%;height:256rpx;margin:34rpx 22rpx 34rpx 0"
        />
      </view>
    </view>
    <view
      class="w-full pl-8 text-left text-[30rpx] text-[#1a1a1a] font-medium leading-normal tracking-[0em] font-[Source_Han_Sans_CN]"
    >
      快捷操作
    </view>
    <view class="grid grid-cols-3 mt-6 gap-14">
      <div v-for="(item, index) in navigator" :key="index" class="h-[160rpx] flex flex-col items-center justify-center rounded-lg bg-[#f5f5f5]" @click="jumpPage(item)">
        <view
          class="iconfont text-12" :class="item.icon"
          :style="{ color: item.color }"
        />
        <view class="mt-4 text-[14px] text-[#333] font-medium">
          {{ item.title }}
        </view>
      </div>
    </view>
  </view>
</template>

<style lang="scss">
  .index_page {
  width: 100vw;
  height: 100vh;
  background-color: #f5f8fe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  position: relative;

  .banner {
    /* banner 4 */

    position: absolute;
    left: 32rpx;
    top: 188rpx;
    width: calc(100vw - 64rpx); /* 100% 视窗减去左右间距 */
    height: 328rpx;
    border-radius: 16rpx;
    opacity: 1;
    align-self: stretch;
    background: #1dc36a;
    display: flex;
    align-items: center;

    .banner_text {
      color: #ffffff;
      font-size: 24rpx;
      margin-left: 24rpx;
      width: 280rpx;
      padding: 12rpx 24rpx;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid;
      border-radius: 48rpx;
      border-image: linear-gradient(180deg, #25c56f 0%, #24c46e 100%) 1;
      backdrop-filter: blur(10px);
    }
  }
}
</style>
